<template>
    <div class="disease-time-analysis">
        <div class="to-choice">
            <div class="disease-name" @click="showDiseaseSelect">
                <i class="el-icon-sort icon"></i>
                <div class="name" :title="disease.name">{{disease.name}}</div>
            </div>
            <timeLine :data="yearList"></timeLine>
        </div>
        <div class="result-show">
            <div class="indicators">
                <el-row gutter="28">
                    <el-col :span="6"
                        v-for="(item, index) in indicatorsList"
                            :key="index">
                        <div class="indicators-item"
                             :style="getStyle(index)"
                             @click="changeIndex(index)"
                            >
                            <div class="name">
                                <span>{{item.name}}</span>
                                <tooltips :data="item.tips"></tooltips>
                                <img class="icon" :src="indicatorsIcon[index].icon">
                            </div>
                            <div class="value" :style="getStyle(index)">
                                本省平均:
                                <span :style="{'color': indicatorsIcon[index].color}">30%</span>
                            </div>
                        </div>

                    </el-col>

                </el-row>
            </div>
            <div class="bottom-charts">
                <div class="leftMap">
                    <div class="title">
                        北京地区监测分布                       
                    </div>
                    <div class="map">
                        <div class="min-max">
                            <div class="title max">
                                <span :style="{'background': indicatorsIcon[activeIndex].bgcolor}"></span>
                                最高
                            </div>
                            <span>北京市 13.5%</span>
                            <div class="title min">
                                <span :style="{'background': indicatorsIcon[activeIndex].bgcolor}"></span>
                                最低
                            </div>
                            <span>北京市 13.5%</span>
                        </div>
                        <diseaseMap :activeIndex="activeIndex"></diseaseMap>
                    </div>
                    
                </div>
                <div class="rightbar">
                    <div class="title">
                        流行病时间监测趋势（5年）
                    </div>
                    <div class="chart">
                        <lineChart></lineChart>
                        <barChart></barChart>
                    </div>
                </div>
            </div>
        </div>
        <!-- 疾病选择弹出框 -->
        <diseaseSelectDialog 
            :disease="disease"
            :dialogVisbile="dialogVisbile" 
            :data="diseaseNameList"
            @selectDisease="selectDisease"></diseaseSelectDialog>
    </div>
</template>
<script>
import { 
    getDiseaseName, 
    getYearList
    } from "@/api/diseaseTimeAnalysis.js";
import diseaseSelectDialog from "./components/diseaseSelectDialog";
import timeLine from "./components/timeLine";
import tooltips from "@/components/tooltips";
import fabinglv from "./img/icon_fabinglv.svg";
import huanbinglv from "./img/icon_huanbinglv.svg";
import siwanglv from "./img/siwanglv.svg";
import feiyongzhichu from "./img/icon_feiyongzhichu.svg";
// 地图组件
import diseaseMap from "./components/mapChart";
// 趋势图
import lineChart from "./components/lineChart";
// 柱状图
import barChart from "./components/barChart";
export default {
    data() {
        return {
            diseaseNameList: [],  //疾病名称dialog集合
            yearList: [],         //年份集合
            dialogVisbile: false,
            disease: {},
            indicatorsList: [
                {
                    name: "患病率",
                    value: "30",
                    unit: "%",
                    tips: "当年疾病就诊人数/期末参保人数"
                },
                {
                    name: "发病率",
                    value: "30",
                    unit: "%",
                    tips: "当年疾病新增就诊人数/期末参保人数"
                },
                {
                    name: "死亡率",
                    value: "30",
                    unit: "%",
                    tips: "当年疾病导致的死亡人数（医保统计口径）/期初参保人数"
                },
                {
                    name: "人均医疗费用支出",
                    value: "30",
                    unit: "%",
                    tips: "当年疾病医疗费用支出/当年就诊人数"
                }
            ],
            indicatorsIcon: [
                {
                    icon: huanbinglv,
                    bgcolor: '#FFD692',
                    color: "#7b5310"
                },
                {
                    icon: fabinglv,
                    bgcolor: "#e0dfff",
                    color: '#655FE0',
                },
                {
                    icon: siwanglv,
                    bgcolor: "#c9ebf6",
                    color: '#1799C2',
                },
                {
                    icon: feiyongzhichu,
                    bgcolor: "#d9ecff",
                    color: '#49A0F6',
                },

            ],
            activeIndex: 0

        }
    },
    components: {
        diseaseSelectDialog,
        timeLine,
        tooltips,
        diseaseMap,
        lineChart,
        barChart
    },
    methods: {
        getDiseaseName() {
            getDiseaseName()
                .then( ({code, data}) => {
                    if(code === "0") {
                        this.diseaseNameList = data;
                        this.disease = data[0] || {code: "", name: ""};
                    }
                })
                .catch( err => {
                    console.log(err);
                })
        },
        // 请求年份数据
        getYearList() {
            getYearList()
                .then( ({code, data}) => {
                    if(code === "0") {
                        this.yearList = data;
                    }
                })
                .catch( err => {
                    console.log(err);
                })
        },
        // 展示疾病选择dialog
        showDiseaseSelect() {
            this.dialogVisbile = true;
        },
        selectDisease(val) {
            this.dialogVisbile = false;
            if(val) {
                this.disease = val;
            }
        },
        getStyle(index) {
            if(index != this.activeIndex) {
                return {
                    background: '#fff',    
                }
            }else {
                return {
                    background: this.indicatorsIcon[index].bgcolor,
                    color: this.indicatorsIcon[index].color
                }
            }
        },
        changeIndex(index) {
            this.activeIndex = index;
        }
    },
    created() {
        this.getDiseaseName();
        this.getYearList();
    }
}
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>